<template>
    <div class="app-container">
        <!-- <el-row :gutter="10" >
            <el-col :span="1.5">
                <el-button
                type="primary"
                plain 
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
                >新增</el-button>
            </el-col>
        </el-row> -->
        <el-table :data="tableData" style="width: 100%" v-loading="loading">
            <el-table-column prop="standardname" label="标准文件名" ></el-table-column>
            <el-table-column prop="standardno" label="标准编号" width="150"></el-table-column>
            <el-table-column prop="standardcategory" label="标准分类" ></el-table-column>
            <el-table-column prop="standardreference" label="标准出处" width="200"></el-table-column>
            <el-table-column prop="waterbody" label="水体分类" width="100" >
                <template slot-scope="scope">
                    <template v-for="item in dict.type.sys_bussinesswaterbody">
                        <span v-if="scope.row.waterbody === item.value">{{item.label}}</span>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="lifecycle" label="使用状态" width="100" >
                <template slot-scope="scope">
                    <span v-if="scope.row.lifecycle == '1'">是</span>
                    <span v-if="scope.row.lifecycle == '0'">否</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                    <el-button
                    type="text"
                    icon="el-icon-setting"
                    size="mini"
                    @click="targetSet(scope.row)">
                        标准详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination layout="total,sizes,prev, pager, next" :total="this.total" background :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"  :page-sizes="[10, 20, 50]"  @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
        <el-dialog :title="'标准详情'" :visible.sync="open" :width="'90%'" append-to-body>
            <el-form ref="queryForm" :model="detailParams" :inline="true" :label-position="'right'">
                <el-form-item label="监测项目名称：" prop="segmentname">
                    <el-input
                    style="width: 150px"
                    v-model="detailParams.itemname"
                    placeholder="请输入内容"
                    ></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="detailHandleQuery" style="padding: 10px;margin-left:15px" >查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="detailData" style="width: 100%" border>
                <el-table-column prop="standardname" label="标准名称" ></el-table-column>
                <el-table-column prop="standardno" label="标准编号" ></el-table-column>
                <el-table-column prop="itemname" label="监测项目名称" ></el-table-column>
                <!-- <el-table-column prop="itemcode" label="监测项目编码" width="320"></el-table-column>
                <el-table-column prop="standardcategory" label="标准分类"  ></el-table-column> -->
                <el-table-column prop="levelname" label="标准级别" width="200"></el-table-column>
                <el-table-column prop="standardvalue" label="标准值" width="200"></el-table-column>
                <el-table-column prop="comparemethod" label="比对方法" width="200" >
                    <template slot-scope="scope">
                        <span >{{comparemethod[scope.row.comparemethod]}}</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column prop="type" label="监测项目标准分类"></el-table-column> -->
            </el-table>
            <el-pagination layout="total,sizes,prev, pager, next" :total="this.dtotal" :current-page="detailParams.pageNum" background :page-size="detailParams.pageSize"  :page-sizes="[10, 20, 50]"  @size-change="dhandleSizeChange" @current-change="dhandleCurrentChange"></el-pagination>
        </el-dialog>
        <div class="text-contaoiner p-20">
            <div class="text px-15 py-10 f-14">
                <div>公式说明:</div>
                <div>
                    <div>
                        单项指标达标性：判断每项监测指标是否符合对应标准限值（如 COD、氨氮等是否超标）；
                    </div>
                    <div>
                        综合质量等级：通过综合指数整合多项指标，反映水体整体污染程度，最终确定水质级别（如地表水 Ⅰ-Ⅴ 类、地下水优良 - 较差等）。
                    </div>
                    <div>
                        <div>
                            直接对比监测值（符号<i class="f-16">C</i><i class="f-12">i</i>）与对应级别标准限值（<i class="f-16">S</i><i class="f-12">i</i>）：
                        </div>
                        <div class="ml-5">
                            若 <i class="f-16">C</i><i class="f-12">i</i> ≤ <i class="f-16">S</i><i class="f-12">i</i>：该指标符合该级别标准；
                        </div>
                        <div class="ml-5">
                            若 <i class="f-16">C</i><i class="f-12">i</i> > <i class="f-16">S</i><i class="f-12">i</i>：该指标超标，水体至少降一个级别（例如：某Ⅲ类水体氨氮超标，则综合级别至少为Ⅳ类）。
                        </div>
                    </div>
                    <div>
                        综合水质级别计算公式：水质级别=max(各单项指标对应的级别)
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {standardcategoryList,qualitystandardList} from './api'
    export default {
        dicts:[
            "sys_bussinesswaterbody"
        ],
        data() {
            return {
                tableData: [],
                loading: false,
                open:false,
                total: 0,
                queryParams: {
                    pageNum:1,
                    pageSize:10
                },
                selectedRow:{},
                detailData:[],
                detailParams:{
                    pageNum:1,
                    pageSize:10,
                    itemname:'',
                },
                dtotal:0,
                // {key:'0',value:'<='},
                //     {key:'1',value:'>='},
                //     {key:'2',value:'>'},
                //     {key:'3',value:'有或无'},
                //     {key:'4',value:'未检出'},
                comparemethod:{
                    '0':'<=',
                    '1':'>=',
                    '2':'>',
                    '3':'有或无',
                    '4':'未检出'
                },
                
            }
        },
        created() {
            this.getList()
        },
        methods: {
            handleSizeChange(val){
                this.queryParams.pageNum = 1;
                this.queryParams.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) { 
                this.queryParams.pageNum = val;
                this.getList();
            },
            dhandleSizeChange(val){
                this.detailParams.pageNum = 1;
                this.detailParams.pageSize = val;
                this.getDetailList(this.selectedRow);
            },
            dhandleCurrentChange(val) { 
                this.detailParams.pageNum = val;
                this.getDetailList(this.selectedRow);
            },
            async getList() {
                this.loading = true
                const res = await standardcategoryList(this.queryParams)
                this.tableData = res.rows
                this.total = res.total
                this.loading = false
            },
            targetSet(row){
                this.open = true;
                this.detailParams.pageNum = 1;
                this.detailParams.pageSize = 10;
                this.getDetailList(row);
                this.selectedRow = {...row}
            },
            detailHandleQuery(){
                this.getDetailList(this.selectedRow);
            },
            async getDetailList(row) { 
                let params = {
                    standardno:row.standardno,
                    ...this.detailParams
                };
                let res = await qualitystandardList(params);
                this.detailData = res.rows;
                this.dtotal = res.total;
            }

        }
    }
</script>
<style scoped lang="scss">
    .text-contaoiner{
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        .text{
            border: 1px solid #aaa;
            background: #eee;
            color: #333;
        }
        
    }
</style>